<template>
  <div class="template-center">
    <!-- 页面导航 -->
    <div class="page-nav">
      <el-menu
        :default-active="$route.path"
        mode="horizontal"
        router
        class="nav-menu"
      >
        <el-menu-item index="/home/template-center/templates">
          <el-icon><Collection /></el-icon>
          <span>模板案例</span>
        </el-menu-item>
        <el-menu-item index="/home/template-center/create">
          <el-icon><Plus /></el-icon>
          <span>创建模板</span>
        </el-menu-item>
      </el-menu>
    </div>

    <!-- 子页面内容 -->
    <div class="page-content">
      <router-view />
    </div>
  </div>
</template>

<script setup>
import { Collection, Plus } from '@element-plus/icons-vue'
</script>

<style scoped lang="scss">
.template-center {
  height: 100%;
  display: flex;
  flex-direction: column;
  
  .page-nav {
    background: white;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    
    .nav-menu {
      border-bottom: none;
      
      :deep(.el-menu-item) {
        height: 56px;
        line-height: 56px;
        font-size: 14px;
        
        &.is-active {
          background: #f0f9ff;
          color: #409eff;
          border-bottom: 2px solid #409eff;
        }
        
        .el-icon {
          margin-right: 8px;
        }
      }
    }
  }
  
  .page-content {
    flex: 1;
    background: #f5f7fa;
    overflow: auto;
  }
}
</style>
